<nb-card>
  <nb-card-header>
    Grid Table
  </nb-card-header>
  <nb-card-body>
    <table>
      <thead>
        <tr>
          <th width="10%">ID</th>
          <th>First Name</th>
          <th>Last Name</th>
          <th>User Name</th>
          <th>Email</th>
          <th>Age</th>
          <th colspan="2" width="10%">Action</th>
        </tr>
        <!-- 搜索行 -->
        <tr class="insert">
          <th>
              <input type="text" placeholder="ID" nbInput
                [(ngModel)]="searchModel.id" (input)="doSearch(searchModel)">
          </th>
          <th>
              <input type="text" placeholder="First Name" nbInput
                [(ngModel)]="searchModel.firstName" (input)="doSearch(searchModel)">
          </th>
          <th>
              <input type="text" placeholder="Last Name" nbInput
                [(ngModel)]="searchModel.lastName" (input)="doSearch(searchModel)">
          </th>
          <th>
              <input type="text" placeholder="User Name" nbInput
                [(ngModel)]="searchModel.userName" (input)="doSearch(searchModel)">
          </th>
          <th>
              <input type="text" placeholder="Email" nbInput
                [(ngModel)]="searchModel.email" (input)="doSearch(searchModel)">
          </th>
          <th>
              <input type="number" placeholder="Age" nbInput
                [(ngModel)]="searchModel.age" (input)="doSearch(searchModel)">
          </th>
          <th colspan="2" width="10%">
            <a class="insert-btn" (click)="gridModel.bol = true">
              <i class="nb-plus"></i>
            </a>
          </th>
        </tr>
      </thead>
      <tbody>
        <!-- 点击加号显示添加数据行 -->
        <tr *ngIf="gridModel.bol">
          <td class="insert"><input nbInput type="text" placeholder="ID" [(ngModel)]="gridModel.id"></td>
          <td class="insert"><input nbInput type="text" placeholder="First Name" [(ngModel)]="gridModel.firstName"></td>
          <td class="insert"><input nbInput type="text" placeholder="Last Name" [(ngModel)]="gridModel.lastName"></td>
          <td class="insert"><input nbInput type="text" placeholder="User Name" [(ngModel)]="gridModel.userName"></td>
          <td class="insert"><input nbInput type="text" placeholder="Email" [(ngModel)]="gridModel.email"></td>
          <td class="insert"><input nbInput type="number" placeholder="Age" [(ngModel)]="gridModel.age"></td>
          <td class="action-edit">
            <a><i class="nb-checkmark" (click)="add(gridModel)"></i></a>
          </td>
          <td class="action-del">
            <a><i class="nb-close" (click)="gridModel.bol = false"></i></a>
          </td>
        </tr>

        <!-- 表格数据显示模式 -->
        <ng-container *ngFor="let item of gridList; let i = index">
          <tr *ngIf="item.bol">
            <td>{{item.id}}</td>
            <td>{{item.firstName}}</td>
            <td>{{item.lastName}}</td>
            <td>{{item.userName}}</td>
            <td>{{item.email}}</td>
            <td>{{item.age}}</td>
            <td class="action-edit">
              <a><i class="nb-edit" (click)="item.bol = false"></i></a>
            </td>
            <td class="action-del">
              <a><i class="nb-trash" (click)="delete(item)"></i></a>
            </td>
          </tr>

          <!-- 点击编辑按钮变成可编辑模式 -->
          <ng-template [ngIf]="!item.bol">
            <tr>
              <td class="insert"><input nbInput type="text" [(ngModel)]="item.id"></td>
              <td class="insert"><input nbInput type="text" [(ngModel)]="item.firstName"></td>
              <td class="insert"><input nbInput type="text" [(ngModel)]="item.lastName"></td>
              <td class="insert"><input nbInput type="text" [(ngModel)]="item.userName"></td>
              <td class="insert"><input nbInput type="text" [(ngModel)]="item.email"></td>
              <td class="insert"><input nbInput type="number" [(ngModel)]="item.age"></td>
              <td class="action-edit">
                <a><i class="nb-checkmark" (click)="update(item, i)"></i></a>
              </td>
              <td class="action-del">
                <a><i class="nb-close" (click)="item.bol = true"></i></a>
              </td>
            </tr>
          </ng-template>
        </ng-container>
      </tbody>
    </table>

    <div class="page-nav">
      <ul>
        <li></li>
      </ul>
    </div>
  </nb-card-body>
</nb-card>
